<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Personleft active="enclosure"/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Memtitle name="简历附件"/>
               <div class="clear"></div>
               <div class="accessories-list">
                <div class="accessories-item" v-if="null != file">
                    <pdf class="img" :page="1" :src="file.fileUrl" ></pdf>
                    <div class="btn" @click="deleteFile">删除</div>
                 </div>
                 <div class="accessories-item" v-if="file == null">
                    <div  alt="" class="uploadimg">
                      <div v-show="uploading" style="line-height: 20px; color: #8D8E9C;text-align: center;margin-top: 20px;"><i class="el-icon-loading"></i> 正在上传</div>
                      <img src="../../assets/img/pdf.png" style="width: 155px; height: 164px; margin: 30px 20px; border: 1px dashed #DCDEE0;" alt="">
                    </div>
                    <el-upload
                      style="width: 100%; height: 40px;"
                      :action="uploadFileUrl"
                      :multiple="false"
                      accept="application/pdf"
                      :data="{user_uid: user_uid}"
                      name="cv_file"
                      :show-file-list="false"
                      :before-upload="handleUpload"
                      :on-success="uploadSuccess"
                      :on-error="uploadError"
                     >
                      <el-button type="primary" class="upload" style="width: 200px;">上传</el-button>
                    </el-upload>
                 </div>
               </div>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import { uploadFileUrl, cVFileByPage, deleteCVFile } from '../../assets/js/domains'
import pdf from 'vue-pdf'

export default {
  name: 'PersonEnclosure',
  components: { Personleft, Memtitle, pdf },
  directives: {},
  data: function () {
    return {
      form: {},
      file: null,
      user_uid: 0,
      uploadFileUrl: uploadFileUrl,
      uploading: false,
      cvList: [],
      page: 0
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.user_uid = localStorage.getItem('md_user_uid')
    this.getpost()
  },
  computed: {},
  mounted: function () {

  },
  methods: {
    handleUpload: function (params) {
      console.log(params)
      if (params.type != 'application/pdf') {
        this.$alert('只支持上传PDF文件')
        return false
      }
      this.uploading = true
    },
    uploadSuccess: function (response, file, fileList) {
      this.uploading = false
      var _this = this
      _this.getpost()
    },
    uploadError: function (err, file, fileList) {
      this.$alert(JSON.parse(err.message).message)
      this.uploading = false
    },
    onSubmit: function (params) {

    },
    getpost: function () {
      var _this = this
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      cVFileByPage({ user_uid: this.user_uid }).then(function (res) {
        console.log(res)
        loading.close()
        if (res.code == 200) {
          _this.file = res.data
        } else {
          _this.file = null
        }
      })
    },
    deleteFile: function () {
      var _this = this
      deleteCVFile({ cv_file_id: this.file.id }).then(function (res) {
        if (res.code == 200) {
          _this.getpost()
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";
</style>
